<template>
  <el-row class="forgot-password-page">
    <el-col :span="12" class="bg"></el-col>
    <el-col :span="6" :offset="3" class="form">
      <!-- 第一步：验证邮箱 -->
      <el-form 
        v-if="currentStep === 1"
        ref="step1Form"
        size="large" 
        :model="formData" 
        :rules="rules"
      >
        <el-form-item>
          <h1>重置密码 - 验证身份</h1>
        </el-form-item>
        
        <el-form-item prop="email">
          <el-input
            v-model="formData.email"
            :prefix-icon="Message"
            placeholder="请输入注册邮箱"
          ></el-input>
        </el-form-item>

        <el-form-item prop="code">
          <div class="code-container">
            <el-input
              v-model="formData.code"
              placeholder="请输入验证码"
              class="code-input"
            ></el-input>
            <el-button 
              class="send-button"
              :disabled="codeCountdown > 0"
              @click="sendVerificationCode"
            >
              {{ codeButtonText }}
            </el-button>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button 
            class="button" 
            type="primary" 
            @click="validateStep1"
          >
            下一步
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 第二步：设置新密码 -->
      <el-form 
        v-else
        ref="step2Form"
        size="large" 
        :model="formData" 
        :rules="rules"
      >
        <el-form-item>
          <h1>设置新密码</h1>
        </el-form-item>

        <el-form-item prop="newPassword">
          <el-input
            v-model="formData.newPassword"
            type="password"
            :prefix-icon="Lock"
            placeholder="请输入新密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item prop="confirmPassword">
          <el-input
            v-model="formData.confirmPassword"
            type="password"
            :prefix-icon="Lock"
            placeholder="请确认新密码"
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button 
            class="button" 
            type="primary" 
            @click="submitNewPassword"
          >
            提交
          </el-button>
        </el-form-item>
      </el-form>

      <div class="back-login">
        <el-link 
          type="info" 
          :underline="false" 
          @click="router.push('/login')"
        >
          ← 返回登录
        </el-link>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Message, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { 
  sendVerificationCodeService,
  verifyCodeService,
  updatePasswordService 
} from '@/api/user.js'

const router = useRouter()
const currentStep = ref(1)

// 表单数据
const formData = reactive({
  email: '',
  code: '',
  newPassword: '',
  confirmPassword: ''
})

// 验证码倒计时
const codeCountdown = ref(0)
const codeTimer = ref(null)
const codeButtonText = computed(() => 
  codeCountdown.value > 0 ? `${codeCountdown.value}秒后重试` : '获取验证码'
)

// 验证规则
const validateConfirmPassword = (rule, value, callback) => {
  if (value !== formData.newPassword) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const rules = reactive({
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码为6位数字', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 5, max: 20, message: '密码长度5-20位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
})

// 发送验证码
const sendVerificationCode = async () => {
  try {
    if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(formData.email)) {
      ElMessage.warning('请输入有效的邮箱地址')
      return
    }

    await sendVerificationCodeService({
      email: formData.email,
      type: 'reset'
    })

    if (codeTimer.value) clearInterval(codeTimer.value)
    codeCountdown.value = 60
    codeTimer.value = setInterval(() => {
      codeCountdown.value--
      if (codeCountdown.value <= 0) clearInterval(codeTimer.value)
    }, 1000)
    ElMessage.success('验证码已发送')
  } catch (error) {
    
  }
}

// 验证第一步
const validateStep1 = async () => {
  try {
    await verifyCodeService({
      email: formData.email,
      code: formData.code,
      type: 'reset'
    })
    currentStep.value = 2
  } catch (error) {
    
  }
}

// 提交新密码
const submitNewPassword = async () => {
  try {
    await updatePasswordService({
      code:formData.code,
      email: formData.email,
      newPassword: formData.newPassword,
      confirmPassword: formData.confirmPassword
    })
    Object.assign(formData, {
      email: '',
      code: '',
      newPassword: '',
      confirmPassword: ''
    })
    currentStep.value = 1
    ElMessage.success('密码修改成功')
    router.push('/login')
  } catch (error) {
    
  }
}
</script>

<style lang="scss" scoped>
.forgot-password-page {
  height: 100vh;
  background-color: #fff;
  
  .bg {
    background: 
      url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
      url('@/assets/login_bg.jpg') no-repeat center / cover;
    border-radius: 0 20px 20px 0;
  }
  
  .form {
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-top: 10vh;
    
    h1 {
      color: #303133;
      font-size: 24px;
      margin-bottom: 30px;
      text-align: center;
    }
    
    .code-container {
      display: flex;
      gap: 12px;
      width: 100%;
      
      .code-input {
        flex: 1;
        :deep(.el-input__wrapper) {
          border-radius: 8px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
      }
      
      .send-button {
        width: 85px;
        height: 60px;  
        padding: 12px;
        border: 1px solid #409eff;
        border-radius: 8px;
        color: #409eff;
        background: transparent;
        transition: all 0.3s;
        line-height: 1;  // 确保文字垂直居中
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);

        &:hover {
          background: rgba(64, 158, 255, 0.1);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
        }
        
        &:disabled {
          color: #a0cfff;
          border-color: #c6e2ff;
          cursor: not-allowed;
          transform: none;
          box-shadow: none;
        }
      }
    }
    
    .button {
      width: 100%;
      padding: 12px;
      font-size: 16px;
      border-radius: 8px;
      background: #409eff;
      transition: all 0.3s;
      
      &:hover {
        background: #66b1ff;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }
    }
    
    .back-login {
      text-align: center;
      margin-top: 20px;
      
      .el-link {
        color: #909399;
        &:hover {
          color: #409eff !important;
        }
      }
    }
    
    .el-input {
      margin-bottom: 20px;
      :deep(.el-input__wrapper) {
        border-radius: 8px;
        padding: 12px 16px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }
  
  @media (max-width: 768px) {
    .el-col.bg {
      display: none;
    }
    .el-col.form {
      width: 90% !important;
      margin: 20px auto;
      
      .code-container {
        flex-direction: column;
        
        .send-button {
          width: 100%;
          margin-top: 8px;
        }
      }
    }
  }
}
</style>